<template>
  <div class="showVideo">
    <!-- 推荐视频 -->
    <div class="videoItem" v-for="item in recommendVideoList" :key="item.id">
      <div class="banner">
        <img :src="item.cover" alt="" />
        <div class="videoInfo">
          <div class="playCount">
            <i class="iconfont icon-shipin"></i>
            <span class="count">{{ item.playCount | playCountFormat }}</span>
          </div>
          <div class="duration">{{ item.duration | durationFormat }}</div>
        </div>
      </div>
      <div class="videoIntro">
        <span class="summary" :style="rows">{{ item.name }}</span>
      </div>
    </div>
    <!-- MV -->
    <div
      class="videoItem"
      v-for="item in MVList"
      :key="item.id"
      @click="goVideoDetail(item)"
    >
      <div class="banner">
        <img :src="item.cover" alt="" />
        <div class="videoInfo">
          <div class="playCount">
            <i class="iconfont icon-shipin"></i>
            <span class="count">{{ item.playCount | playCountFormat }}</span>
          </div>
          <div class="duration">{{ item.duration | durationFormat }}</div>
        </div>
      </div>
      <div class="videoIntro">
        <span class="summary" :style="rows">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { playCountFormat, durationFormat } from "@/utils/index";

export default {
  name: "ShowVideo",
  props: {
    rowsNum: {
      type: Number,
      default: 2,
    },
    recommendVideoList: {
      type: Array,
      default() {
        return [];
      },
    },
    MVList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    goVideoDetail(item) {
      // + Vue Router中query对象值的问题
      // 在使用 $router.push() 时，如果使用了query，则可以在跳转后从query中获取到对应的参数
      // 如果传的是字符串自然没问题，但是如果传的其他类型的数据，在跳转之前是正常的，而跳转之后再刷新一遍页面的话，query里面属性的值都会变成字符串
      // 因为刷新后query的值是直接从页面URL中取的，而在页面URL上的参数只能是字符串类型
      // + 解决方法：
      // 在传值之前把要传的参数单独放到一个对象里，再放到query里面，然后进行JSON.stringify()处理
      // 到了目标页面后再进行JSON.parse()处理，还原为对象
      // + 优点：可以一次性处理多个参数，适用度高
      // this.$router.push({ path: "/video/detail", query: item });
      // ({}).toString() => [object Object]
      // this.$router.push({ path: "/video/detail", query: { item } });
      this.$router.push({
        path: "/video/detail",
        query: { item: JSON.stringify(item) },
      });
    },
  },
  computed: {
    rows() {
      return `-webkit-line-clamp: ${this.rowsNum}`;
    },
  },
  filters: {
    playCountFormat,
    durationFormat,
  },
};
</script>

<style lang="scss" scoped>
.showVideo {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  .videoItem {
    width: 49%;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    .banner {
      position: relative;
      width: 100%;
      height: 6.5rem;
      img {
        width: 100%;
        height: 6.5rem;
      }
      .videoInfo {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 1.5rem;
        font-size: 0.8rem;
        color: #fff;
        div {
          flex: 1;
          height: 1.5rem;
          line-height: 1.5rem;
        }
        .playCount {
          text-align: left;
          padding-left: 0.5rem;
          i.iconfont {
            margin-right: 0.3rem;
            font-size: 1rem;
          }
        }
        .duration {
          text-align: right;
          padding-right: 0.5rem;
        }
      }
    }
    .videoIntro {
      width: 100%;
      height: 3.2rem;
      padding: 0.4rem 0.2rem;
      background-color: #fff;
      span.summary {
        font-size: 0.9rem;
        color: #1a1a1a;
        text-align: left;
        line-height: 1.2rem;
        // 控制文本多行显示，溢出显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        // 按需传入，动态显示行数
        // -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>